<template>
  <div class="home-page">
    <button class="add-product-btn" @click="goToNewPage">新增产品</button>
    <div class="cards-container">
      <card
        v-for="(card, index) in cards"
        :key="index"
        :imageSrc="card.imageSrc"
        @delete="handleDelete(index)"
      ></card>
    </div>
  </div>
</template>

<script>
import Card from '../components/Card.vue'

export default {
  components: {
    Card
  },
  data() {
    return {
      cards: [
        // 假设的卡片数据，实际中可能从API获取
        { imageSrc:  '@/assets/images/pay.png' },
        // ... 其他11张卡片
      ]
    }
  },
  methods: {
    goToNewPage() {
      this.$router.push('/page-b'); // 跳转到页面B
    },
    handleDelete(index) {
      // 处理删除逻辑，例如从数组中移除卡片
      this.cards.splice(index, 1);
    }
  }
}
</script>

<style scoped>
.home-page {
  display: flex;
  align-items: center; /* 如果需要垂直居中按钮和卡片 */
  justify-content: space-between; /* 这不是必需的，但可以根据需要调整 */
  height: 100vh; /* 或者你需要的任何高度 */
}

.add-product-btn {
  margin-right: auto; /* 将按钮推向左侧 */
}

.cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* 卡片从左侧开始排列 */
}

.card {
  margin: 10px;
  /* 其他卡片样式 */
}
</style>
